<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="container">
      <div class="box1">1</div>
      <div class="box2">2</div>
      <div class="box3">3</div>
    </div>

    <script>
      // 一、父关系 ：一定会找到一个容器，父节点 和父元素 是一样的；
      var box2 = document.querySelector(".box2");
      // // 1.父节点
      // // document.onclick = function(){
      // //     console.log( box2.parentNode)
      // // }
      // // 2.父元素
      // document.onclick  = function(){
      //     console.log(box2.parentElement.parentElement.parentElement);
      // }

      // 二、兄弟关系 ；
      // 1.上一个兄弟元素 previousElementSibling
      // document.onclick = function(){
      //   console.log(  box2.previousElementSibling);
      // }
      // 2.上一个兄弟节点
      // document.onclick = function(){
      //   console.log(box2.previousSibling);
      // }

      // 3.下一个兄弟元素 nextElementSibling
      // document.onclick = function(){
      //     console.log(box2.nextElementSibling)
      // }

      // 4.下一个兄弟节点 nextSibling
      document.onclick = function () {
        console.log(box2.nextSibling);
      };

      // 总结 ： 1.父级元素和节点是一样的 可以混用
      // 2.上一个兄弟节点或者元素  3.下一个兄弟节点或者元素；
    </script>
  </body>
</html>
